<template>
    <div class="lable">
        <h4 class="title">
            <LableIcon class="title_icon" />
            标签云
        </h4>
        <ul class="lable_list">
            <li class="item" v-for="(item, i) in LableList" :key="i">
                <span @click="handleLableSwitch(item)" to="'search/' + SearchEnum.label + '/' + item.id">{{ item.name
                }}</span>
            </li>
        </ul>
    </div>
</template>


<script lang="ts" setup>
import LableIcon from '@/components/icons/lableIcon.vue'
import { ref } from 'vue';
import type Lable from '@/components/home/type/lable'
import SearchEnum from '@/components/home/enum/search'
import { useRouter } from 'vue-router';
import getTags from "@/composables/request/tag/getTags";


const router = useRouter();
const LableList = ref<Lable[]>()
function handleLableSwitch(item: Lable) {
    router.push(`/search/${item.name}/${SearchEnum.label}/${item.id}`)
}
async function getTag()  {
  LableList.value = await getTags();
}
getTag()



</script>


<style lang="less" scoped>
.lable {
    margin-top: 50px;

    .title {
        display: flex;
        font-size: 16px;
        font-weight: 600;

        .title_icon {
            width: 17px;
            margin-right: 8px;
        }
    }

    .lable_list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;

        .item {
            margin-right: 20px;
            margin-top: 10px;

            span {
                cursor: pointer;
                padding: 3px 7px 5px 7px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--info-color);
                border-radius: 10px;
                font-size: 14px;

                &:hover {
                    background: var(--black-primary);
                    color: var(--white-primary);
                }
            }

            &:nth-child(3n) {
                margin-right: 0px;
            }
        }
    }
}
</style>